<script>

  import sheep from '@/sheep';

  export default {
    name: "cardHints",
    props: {
      options:{
        type:Object,
        default:()=>{}
      },
      // 卡片信息
      info: {
        type: Object,
        default: () => {
          return {}
        }
      },
      index: {
        type: Number,
        default: 0
      },
      length: {
        type: Number,
        default: 0
      },
      is_share:{
        type: Boolean,
        default: false
      }
    },
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path
      },
      token() {
        return sheep.$store('user').isLogin
      }
    },
    methods: {
      async anniversariesListPath() {
        if (!this.token) {
          this.$emit('openLogin')
          return;
        }
        if (this.is_share) {
          return
        }
        if (!this.info.countdown.mDay && this.info.type == 1) {
          const { code, msg } = await sheep.$api.family.checkAuth({
            family_id: this.options.family_id,
            action: 'add',
          });
          if (code != 1) {
            sheep.$helper.toast(msg)
            return;
          }else{
            console.log(this.info);
            sheep.$router.go('/pages/family/birthday', {
              family_id: this.options.family_id,
              flag: 1,
              birthday_id: this.info.id,
              member_id: this.info.member_id,
              date: '',
              username: this.info.username
            })
          }
          return;
        }
        if (!this.info.countdown.mDay && this.info.type == 2) {
          const { code, msg } = await sheep.$api.family.checkAuth({
            family_id: this.options.family_id,
            action: 'add',
          });
          if (code != 1) {
            sheep.$helper.toast(msg)
            return;
          }else{
            sheep.$router.go('/pages/family/anniversary', {
              family_id: this.options.family_id,
              name: this.info.username,
              is_flag: 1,
              isEdit: 1,
              anniversaryId: this.info.id,
              member_id: this.info.member_id,
              username: this.info.username,
              date: '',
            })
          }
          return;
        }
        this.$emit('anniversariesListPath', this.info.type == 2 ? 2 : 1, this.info)
      }
    },
  }
</script>

<template>
  <view class="cardHints flex flex-column justify-between" :style="{
    background: info.type == 2 ? 'linear-gradient( 360deg, #FFF9F7 0%, #FDD7CB 100%)' : 'linear-gradient(360deg, #FDFDEC 0%, #FFE6AF 100%)',
    margin: index == 0 ? '0 10rpx 0 0' : length - 1 == index ?'0 0 0 10rpx' : '0 10rpx',
  }" @click.stop="anniversariesListPath">
    <!--    <image class="cardHints_image" :src="info.status == 1 ? `${IMG_URL}annexs.png` : `${IMG_URL}births.png`"-->
    <!--           v-if="info.status != 1"></image>-->
    <view class="cardHints_top">
      <view class="cardHints_top_name ellipsis-multiline webkit-line-clamp-1 flex align-center" :style="{
      background:info.type == 2 ? '#FFCFC1':'#FEDBA0'
    }">
        <text class="cardHints_bottom_text ml_15 fs_30">{{
            info.type == 2 ? info.desc : info.username + '的生日'
          }}
        </text>
      </view>
      <view class="cardHints_top_dateDescription flex justify-center align-center"
            :class="info.countdown.day > 0 ? 'mt_20':'mt_16'">
        <template v-if="!!info.countdown.date && info.countdown.day > 0">
          <view class="cardHints_top_dateDescription_left mr_12 flex flex-column justify-end">
            <text class="cardHints_top_dateDescription_left_text">还有</text>
          </view>
          <view class="cardHints_top_dateDescription_center flex align-center justify-center">
            <text class="cardHints_top_dateDescription_center_text fs_42">{{ info.countdown.day }}</text>
          </view>
          <view class="cardHints_top_dateDescription_right ml_12 flex flex-column justify-end">
            <text class="cardHints_top_dateDescription_right_text">天</text>
          </view>
        </template>
        <template v-else-if="!!info.countdown.date && info.countdown.day == 0">
          <view class="cardHints_top_dateDescription_center flex align-center justify-center">
            <text class="cardHints_top_dateDescription_center_text fs_42">今天</text>
          </view>
        </template>
        <template v-else>
          <view class="cardHints_top_dateDescription_center flex flex-column align-center justify-center">
            <text class="cardHints_top_dateDescription_center_text">记录一下</text>
            <text class="cardHints_top_dateDescription_center_text fs_22 c9F fw_200">唯有亲情最相思</text>
          </view>
        </template>
      </view>
    </view>
    <view class="cardHints_bottom flex align-center justify-between">
      <view class="cardHints_top_name_time ml_15">
        <text class="cardHints_top_name_time_text">
          {{ info.countdown.mDay || '' }}
        </text>
      </view>
      <view class="cardHints_top_name_identity flex align-center justify-center" :style="{
          background:info.type != 1 ? '#FFCFC1' : '#FEDBA0'
        }">
        <text class="cardHints_top_name_identity_text">{{ info.type != 1  ? '纪念日' : '生日' }}</text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .cardHints {
    width: 270rpx;
    height: 188rpx;
    border-radius: 20rpx;
    position: relative;
    /* #ifdef H5 || APP */
    display: inline-table;
    /* #endif */
    .cardHints_image {
      position: absolute;
      top: 45rpx;
      right: 2rpx;
      width: 100rpx;
      height: 89rpx;
    }

    .cardHints_top {
      width: 270rpx;
      border-radius: 20rpx 20rpx 0 0;
      overflow: hidden;

      .cardHints_top_name {
        padding: 5rpx 0;

        .cardHints_top_name_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #0F0F0F;
        }


      }

      .cardHints_top_dateDescription {

        .cardHints_top_dateDescription_left {
          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #000000;
          }
        }

        .cardHints_top_dateDescription_center {
          &_text {
            text-align: center;
            white-space: nowrap;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #FF4206;
          }
        }

        .cardHints_top_dateDescription_right {
          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 26rpx;
            color: #292929;
          }
        }
      }
    }


  }

  .cardHints_bottom {
    width: 270rpx;
    border-radius: 0 0 21rpx 21rpx;
    padding: 0rpx 0 0rpx 0;
    overflow: hidden;

    &_text {
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
    }
  }

  .cardHints_top_name_identity {
    width: 90rpx;
    padding: 4rpx 8rpx;
    border-radius: 20rpx 0 0 0;

    .cardHints_top_name_identity_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
    }


  }

  .cardHints_top_name_time {
    .cardHints_top_name_time_text {
      white-space: nowrap;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #4B4B4B;
    }
  }

  .c9F {
    color: rgba(159, 159, 159, 0.4) !important;
  }
</style>